<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 第一步：拷贝项目下面生成的symbol代码： -->
    <!-- 通过js的方式，动态创建的svg舞台(全是图标) -->
    <script src="https://at.alicdn.com/t/font_3434164_hzxkv2gwjkk.js"></script>
    <!-- 第二步：加入通用css代码（引入一次就行）： -->
    <style type="text/css">
        .icon {
            /* 1em 会自动换算成 当前元素 font-size 大小 */
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
            font-size: 50px;
        }
    </style>
</head>

<body>
    <!-- svg sprites svg精灵图：节约请求次数，并且可以等比例缩放，不失真 -->
    <!-- 利用id实现图标的选取，开发体验非常好 -->
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-xuegao"></use>
    </svg>

</body>

</html>